<template>
<el-row justify="start" >
  <el-col :span="3"  v-for="image in imageList" :key="image.imageId">
    <el-image :src="image.imageUrl" :alt="image.imageName"/>
    <el-button @click="deleteHorseImage(image.imageId,image.imageUrl)" type="text">删除</el-button>
  </el-col>
  &nbsp;
  <el-col :span="4">
    <el-input style="width: 200px" show-word-limit maxlength="10" v-model="imageName" placeholder="输入图片名称"></el-input>
    <br/>
    <br/>
    <el-upload
        class="upload-demo"
        :action="`${urlUpload}/oss/uploadFile`"
        :file-list="fileList"
        :before-upload="beforeUpload"
        :on-success="uploadSuccess"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">只能上传 jpg/png/jpeg 文件，且不超过 1mb</div>
      </template>
    </el-upload>
  </el-col>
</el-row>
</template>

<script>


import {deleteImage, getHorse, inseertHorse, insertHorse} from "@/api/multimedia";
import {baseURLMulti} from "@/setting";

export default {
  name: "horse",
  data(){
    return{
      imageName:'',
      urlUpload:baseURLMulti,
      fileList:[],
      imageList:[],
      sendImage:'',
    }
  },
  mounted() {
    this.getImage()
  },
  methods:{
    uploadSuccess(response, file, fileList){
      this.sendImage=(response.data.imageUrl)
      const imageCla={
        imageName:this.imageName,
        imageUrl:this.sendImage,
        imageType:'HORSE'
      }
      insertHorse(imageCla).then(()=>{
        this.getImage()
      })
    },
    beforeUpload(file){
      if (this.imageName===''){
        this.$message({
          type:"warning",
          message:"图片名称不能为空"
        })
        return false
      }
      if(this.imageList.length>3){
        this.$message({
          type:"warning",
          message:"最多上传三张跑马灯图片"
        })
        return false
      }
      const isJPG = file.type === 'image/jpeg'||file.type === 'image/jpg' ||file.type==='image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG||!isLt2M) {
        this.$message({
          type:'warning',
          message:'上传头像图片只能是 jpg、jpeg 格式,并且上传头像图片大小不能超过 1MB!'
        })
        return false
      }
      return true
    },
    getImage(){
      getHorse().then(response=>{
        this.imageList=response.data.image
      })
    },
    deleteHorseImage(imageId,imageUrl){
      deleteImage(imageId,imageUrl).then(()=>{
        this.getImage()
      })
    }
  }
}
</script>

<style lang="less" >
//.el-upload--picture-card{
//  width: 120px;
//  height: 100px;
//}
</style>
